<template>
  <div class="updateLog">
    <el-card class="head_box">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input v-model="query.versionNumber" :placeholder="$t('versionManagement.version04')" clearable />
        </el-col>
        <el-col :span="5">
          <el-input v-model="query.logTheme" :placeholder="$t('updateLog.updateLog_1')" clearable />
        </el-col>
        <el-col :span="5">
          <el-date-picker v-model="dates" :end-placeholder="$t('versionLogManagement.version02')"
            :start-placeholder="$t('versionLogManagement.version01')" format="yyyy-MM-dd" type="daterange"
            value-format="yyyy-MM-dd" />
        </el-col>
        <el-col :span="5">
          <el-button type="primary" icon="el-icon-search" @click="toSearch">
            {{ $t('versionLogManagement.version00') }}
          </el-button>

          <el-button @click="reset()">{{ $t('add.add124') }}</el-button>
        </el-col>
        <el-col :span="4" class="query_btn">
          <el-button type="primary" @click="action('', 'add')">
            {{ $t('add.add54') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div class="table_box">
        <el-table :data="tableData" style="width: 100%" height="570">
          <el-table-column prop="versionNumber" :label="$t('versionManagement.version04')" align="center"
            show-overflow-tooltip />
          <el-table-column prop="logTheme" :label="$t('updateLog.updateLog_1')" align="center" />
          <el-table-column prop="logThemeEn" :label="$t('updateLog.updateLog_2')" align="center" />
          <el-table-column prop="themeContent" :label="$t('updateLog.updateLog_5')" align="center"
            show-overflow-tooltip />
          <el-table-column prop="themeContentEn" :label="$t('updateLog.updateLog_6')" align="center"
            show-overflow-tooltip />

          <el-table-column prop="createTime" :label="$t('patient.huanzhe2')" align="center" show-overflow-tooltip />

          <el-table-column align="center" :label="$t('add.add131')" min-width="150">
            <template slot-scope="scope" style="display: flex; justify-content: flex-start">
              <el-button type="text" :size="tableButtonSize" @click="action(scope.row, 'edit')">{{
                $t('patient.huanzhe17')
              }}</el-button>

              <el-button type="text" :size="tableButtonSize" @click="action(scope.row, 'delete')">{{
                $t('add.add020')
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination background :current-page="query.page" :page-size="query.limit" :page-sizes="[10, 20, 50, 100]"
        :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onPageSizeChange"
        @current-change="onPageChange" />
    </el-card>
    <!-- 新增编辑弹框 -->
    <el-dialog destroy-on-close :close-on-click-modal="false" :visible.sync="dialogVisible" :show-close="false"
      width="55%">
      <div slot="title">
        <div class="dialog_head">
          <span>{{ dialogTitle }}</span>
          <img src="@/assets/img/icon/close_2.png" @click="dialogVisible = false" />
        </div>
      </div>
      <div class="dialog_content">
        <el-form :inline="true" :rules="rules" ref="ruleForm" :model="form" label-width="200px">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('versionManagement.version04')" prop="versionNumber">
                <el-input v-model="form.versionNumber" :placeholder="$t('updateLog.updateLog_11')" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('updateLog.updateLog_1')" prop="logTheme">
                <el-input v-model="form.logTheme" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('updateLog.updateLog_5')" prop="themeContent">
                <editor ref="themeContentRef" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('updateLog.updateLog_2')" prop="logThemeEn">
                <el-input v-model="form.logThemeEn" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row />

          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('updateLog.updateLog_6')" prop="themeContentEn">
                <editor ref="themeContentEnRef" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('updateLog.updateLog_12')" prop="logThemePt">
                <el-input v-model="form.logThemePt" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('updateLog.updateLog_14')" prop="themeContentPt">
                <editor ref="themeContentPtRef" />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('add.add31') }}</el-button>
        <el-button :loading="subLoading" type="primary" @click="toSubmit('ruleForm')">{{
          $t('add.add30')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css';
import editor from '@/components/editor/index';
export default {
  name: 'OralScan',

  data() {
    return {
      dates: [],
      tableData: [],
      query: {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        versionNumber: '',
        logTheme: '',
      },
      total: 0,
      dialogVisible: false,
      dialogTitle: this.$t('patient.huanzhe6'),
      form: {},
      rules: {
        versionNumber: [
          {
            required: true,
            message: this.$t('versionManagement.version11'),
            trigger: ['blur'],
          },
        ],

        logTheme: [
          {
            required: true,
            message: this.$t('updateLog.updateLog_3'),
            trigger: ['blur'],
          },
        ],
        logThemeEn: [
          {
            required: true,
            message: this.$t('updateLog.updateLog_4'),
            trigger: ['blur'],
          },
        ],
        logThemePt: [
          {
            required: true,
            message: this.$t('updateLog.updateLog_13'),
            trigger: ['blur'],
          },
        ],
        themeContentPt: [
          {
            required: true,
            message: this.$t('updateLog.updateLog_15'),
            trigger: ['blur'],
          },
        ],
      },
      action_type: 'add',
      subLoading: false,
    };
  },
  components: {
    editor,
  },
  created() {
    this.toSearch();
  },
  mounted() { },
  methods: {
    toSearch() {
      this.query.page = 1;
      this.search();
    },
    assignmentQuery() {
      if (this.dates && this.dates.length > 0) {
        this.query.startTime = this.dates[0];
        this.query.endTime = this.dates[1];
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
      }
    },
    search() {
      this.assignmentQuery();
      this.$http({
        url: '/cloudplatformlogcontent/pageUpdateLog',
        method: 'get',
        params: this.query,
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log('res--', res);
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onPageSizeChange(pageSize) {
      this.query.limit = pageSize;
      this.search();
    },
    onPageChange(page) {
      this.query.page = page;
      this.search();
    },
    reset() {
      this.dates = [];
      this.query = {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        versionNumber: '',
        logTheme: '',
      };
      this.toSearch();
    },
    action(row, type) {
      this.form = {};
      if (type === 'add') {
        this.dialogTitle = this.$t('patient.huanzhe6');
        this.dialogVisible = true;
        this.action_type = 'add';
      } else if (type === 'details') {
        this.dialogTitle = this.$t('add.add132');
        this.dialogVisible = true;
      } else if (type === 'edit') {
        this.dialogTitle = this.$t('equipmentManagement.shebei18');
        this.dialogVisible = true;
        this.action_type = 'edit';

        this.form = row;

        this.$nextTick(() => {
          setTimeout(() => {
            let themeContentRef = this.$refs.themeContentRef;
            let themeContentEnRef = this.$refs.themeContentEnRef;
            let themeContentPtRef = this.$refs.themeContentPtRef;

            themeContentRef.setHtml(this.form.themeContent);
            themeContentEnRef.setHtml(this.form.themeContentEn);
            themeContentPtRef.setHtml(this.form.themeContentPt);

          }, 200);
        });
      } else if (type === 'delete') {
        this.$confirm(this.$t('add.add055'), this.$t('add.add140'), {
          confirmButtonText: this.$t('add.add81'),
          cancelButtonText: this.$t('add.add203'),
          type: 'warning',
        })
          .then(async () => {
            this.$http({
              url: '/cloudplatformlogcontent/deleteUpdateLog',
              method: 'post',
              data: {
                id: row.id,
              },
            })
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(res.data);
                  this.search();
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('add.add145'),
            });
          });
      }
    },
    toSubmit(formName) {
      let themeContentRef = this.$refs.themeContentRef;
      let themeContentEnRef = this.$refs.themeContentEnRef;
      let themeContentPtRef = this.$refs.themeContentPtRef;
      this.form['themeContent'] = themeContentRef.getHtml();
      this.form['themeContentEn'] = themeContentEnRef.getHtml();
      this.form['themeContentPt'] = themeContentPtRef.getHtml();

      this.$refs[formName].validate((valid) => {

        if (valid) {
          if (this.subLoading || !this.dialogVisible) {
            return false;
          }
          this.subLoading = true;

          if (this.action_type === 'add') {
            this.$http({
              url: '/cloudplatformlogcontent/saveUpdateLog',
              method: 'post',
              data: this.form,
            })
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.subLoading = false;
                  return this.$message.error(res.msg);
                } else {
                  this.subLoading = false;
                  this.$message.success(res.data);
                  this.dialogVisible = false;
                  this.search();
                }
              })
              .catch((err) => {
                this.subLoading = false;
                console.log('err', err);
              });
          } else if (this.action_type === 'edit') {
            this.$http({
              url: '/cloudplatformlogcontent/updateUpdateLog',
              method: 'post',
              data: this.form,
            })
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.subLoading = false;
                  return this.$message.error(res.msg);
                } else {
                  this.subLoading = false;
                  this.$message.success(res.data);
                  this.dialogVisible = false;
                  this.search();
                }
              })
              .catch((err) => {
                this.subLoading = false;
                console.log('err', err);
              });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.updateLog {
  width: 100%;
  height: 100%;

  .dialog_head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 20px;
      font-weight: bolder;
    }

    img {
      cursor: pointer;
    }
  }

  .head_box {
    margin-bottom: 20px;
  }

  .el-date-editor {
    width: 100%;
  }

  .table_box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .query_btn {
    text-align: right;
  }

  ::v-deep .el-form--inline .el-form-item__label {
    display: block !important;
    text-align: left;
    padding: 0 10px;
  }

  .el-form-item {
    width: 100%;
  }

  ::v-deep .el-form-item__content {
    width: 100%;
    padding: 0 10px;
  }

  .dialog_content {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
